<style  lang="less">

</style>
<template>
    <div style="background: #ffffff">
        <div class="ivu-card-head">
            <p>部门设置</p>
            <Row style="margin-top: 10px">
                <Button type="primary" @click="showDepartModal(false)">新增</Button>
                <Button type="primary" @click="showDepartModal(true)">修改</Button>
                <Button type="primary" @click="deleteDepart" v-show="false">删除</Button>
            </Row>
        </div>
        <div >
            <SwitchGroup v-model="departInfo.value" style="padding: 20px" @on-change="handleChange">
                <HorizonSwitch  v-for="item in departs" :key="item.value"
                               class="margin-right-10" :label="item.value" :name="item.label">
                </HorizonSwitch>
            </SwitchGroup>
        </div>

        <Modal :title="departModalTitle" v-model="departModal" @on-cancel="hideDepartModal">
            <Form ref="departForm" :label-width="80" :model="departInfo" :rules="departFormRule">
                <FormItem label="部门名称" prop="label">
                    <Input placeholder="请输入部门名称" v-model.trim="departInfo.label" @on-enter="handleSubmit"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="primary" @click="handleSubmit">提交</Button>
            </div>
        </Modal>

    </div>
</template>
<script>
    import SwitchGroup from "../weiget/SwitchGroup.vue"
    import HorizonSwitch from "../weiget/HorizonSwitch.vue"
    import Me from "../../controllers/departSetting"

    export default {
        components:{
            SwitchGroup,
            HorizonSwitch
        },
        created(){
            this.loadDepartment()
        },
        data(){
            return{
                departs:[

                ],
                departId:"",
                departModal:false,
                departInfo:{
                    checked:false,
                    value:"",
                    label:"",
                },
                departInfo1:{

                },
                departFormRule:{
                    label:[{required:true,message:'必填',trigger:'blur'}]
                },
                edit_flag:false,
                departModalTitle:""
            }
        },
        methods:{
            handleSubmit(){
                this.$refs['departForm'].validate(valid=>{
                    if(valid){
                        if(this.edit_flag){
                            this.updateDepart()
                        }else{
                            this.addDepart()
                        }
                    }
                })
            },
            showDepartModal(edit_flag){
                this.edit_flag = edit_flag
                if(this.edit_flag){
                    this.departModalTitle = "修改部门名称"
                    this.departInfo = this.departInfo1
                    if(this.departInfo.checked){
                        this.departModal = true
                    }else{
                        this.$Message.error("请先选择部门")
                    }
                }else{
                    this.departModalTitle = "新增部门"
                    this.$refs['departForm'].resetFields()
                    this.departModal = true
                }
            },
            hideDepartModal(){
//                this.$refs['departForm'].resetFields()
                this.departModal = false
                this.edit_flag = false
            },
            addDepart(){
                Me.addDepart(this.departInfo.label).then(json=>{
                    if(json.code == 0){
                        //成功
                        this.hideDepartModal()
                        this.loadDepartment()
                    }
                })
            },
            updateDepart(){
                Me.updateDepart(this.departInfo.value,this.departInfo.label).then(json=>{
                    if(json.code == 0){
                        //成功
                        this.hideDepartModal()
                        this.loadDepartment()
                    }
                })
            },
            deleteDepart(){
                this.departInfo = this.departInfo1
                if(!this.departInfo.checked){
                    this.$Message.error("请先选择部门")
                    return
                }
                this.$Modal.confirm({
                    title: "确认",
                    content: "删除【" + this.departInfo.label + "】？",
                    onOk: () => {
                        Me.deleteDepart(this.departInfo.value).then(json=>{
                            if(json.code == 0){
                                //成功
                                this.$Message.success("删除成功")
                                this.loadDepartment()
                            }
                        })
                    }
                })
            },
            loadDepartment(){
                Me.queryAllDepart().then(json=>{
                    if(json.code == 0){
                        this.departs = json.data
                    }
                })
            },
            handleChange(data){
                this.departInfo1 = data
//                this.departInfo = data
            }
        },
    }
</script>